<template>
  <ul class="listbox">
    <li v-for='(item,index) in list' @click='navTab(item.ID)'>
      <div class="listimg">
         <img class="itemimg bgimg" v-lazy.container="item.Cover">
         <img class='sealout' src="../../assets/footer/selaout.png" v-if='item.IsSaleOut'>
      </div>
      <div class="content">{{item.Title}}</div>
      <div class="priceBox">
        <div class="price">￥{{item.Price}}</div>
        <div class="total" v-if='item.DealCount > 0'>总销量{{item.DealCount}}件</div>
      </div>
      <template v-if='flage'>  
        <div class="progerss">
          <div style="height:8px;background-color:#f97b7c;" :style='"width:"+item.DealCount*100/item.ChengTuanCount+"%"'></div>
        </div>
        <div class="contText" v-if='item.Statu == "已下架"'>已下架</div>
        <div class="contText" v-if='item.Statu == "已上架"'>
          <img v-if='item.DisplayStatu == "新款"' src="../../assets/footer/new.png">
          <img v-if='item.DisplayStatu == "补货中"' src="../../assets/footer/patch.png">
          <span v-if='item.DealCount >= item.ChengTuanCount'>已拼{{item.DealCount}}件, 拼货成功啦!</span>
          <span v-if='item.DealCount < item.ChengTuanCount'>已拼{{item.DealCount}}件, 差{{item.ChengTuanCount - item.DealCount}}件成团</span>
        </div>
      </template>
    </li>
  </ul>
</template>

<script>
import Vue from 'vue'
import { Lazyload } from 'mint-ui'
Vue.use(Lazyload)
export default {
  name: 'list',
  props:{
    list:{type:Array},
    flage: {type:Boolean}
  },
  data () {
    return {
      
    }
  },
  created: function () {

  },

  methods: {
    navTab: function(id){
      this.$router.push({
        path: '/itemdetail',
        query: { id:id}
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .listbox{width: 100%;background-color: #efefef;overflow: hidden;padding: 5px 0;}
  .listbox li{float: left;width: 47%;border:1px solid #ccc;margin-left: 2%;margin-top: 5px;position: relative;background-color: #fff;height: 346px;}
  .listimg{width: 100%;position: relative;height: 220px;overflow: hidden;}
  .listimg .sealout{position: absolute;width: 45%;left: 27.5%;top: 30%}
  .listimg .itemimg{width: 100%;height:100%;display: inline-block;vertical-align: middle;object-fit: cover;}
  .content{width: 92%;padding: 5px 4%;font-size: 12px;color: #555;height: 44px;line-height: 22px;overflow: hidden;}
  .priceBox{width: 92%;padding: 0px 4% 5px;font-size: 12px;color: #555;overflow: hidden;}
  .price{font-size: 18px;color: #d52831;float: left;}
  .total{font-size: 12px;color: #555;float: right;;margin-top: 6px;}
  .progerss{height: 8px;border-radius: 8px;margin: 6px;overflow: hidden;background-color: #ccc;}
  .contText{width: 92%;padding: 0px 4% 5px;text-align: center;font-size: 12px;overflow: hidden;}
  .contText img{float:left;height: 14px;width: 14px;}
  .contText span{float:left;height: 14px;line-height: 14px;margin-left:2px;}
</style>
